<template>
  <div class="detail-container">
    <h3>{{type === 'add' ? '新增' : '编辑'}}</h3>
    <el-form ref="configForm" :model="configForm" :rules="configFormRules" label-width="80px">
      <div v-if="type === 'view'" class="detail-name">
        {{data.name}}
      </div>
      <el-form-item label="配置名称" prop="name" v-else>
        <el-input v-model="configForm.name" placeholder="请输入配置名称"></el-input>
      </el-form-item>
    </el-form>
    <!-- 循环 list 并渲染各个区域 -->
    <div v-for="(item, index) in configForm.configInfo" :key="index" class="config-item">
      <!-- 标题：使用 item.name -->
      <p style="margin-bottom: 5px">{{ item.name }}</p>

      <!-- 旋转角度与完成时间输入框，同一行展示 -->
      <div class="input-group">
        <div class="input-item">
          <label>起始角度：</label>
          <el-input-number v-model="configForm.configInfo[index].startAngle" @blur="startRotateChange($event,item)" :min="item.min"
                           :max="item.max" label="请输入起始角度" size="small"></el-input-number>
        </div>
        <div class="input-item">
          <label>结束角度：</label>
          <el-input-number v-model="configForm.configInfo[index].endAngle" :min="item.min" :max="item.max" label="请输入结束角度"
                           size="small"></el-input-number>
        </div>
      </div>
      <div class="input-group">
        <div class="input-item">
          <label>执行时间：</label>
          <el-input-number v-model="configForm.configInfo[index].second" :min="0" :max="1000" label="请输入完成时间"
                           size="small"></el-input-number>

        </div>
      </div>
      <div class="bottom-btn">
        <!-- 清空按钮 -->
        <el-button size="small" @click="clearInputs(index)">清空</el-button>
        <!-- 清空按钮 -->
        <el-button size="small" type="primary" @click="handleStart(index)">运行</el-button>
      </div>

    </div>

    <div class="detpBtn">
      <el-button @click="closeForm()">取消</el-button>
      <el-button @click="handleStartAll()">运行</el-button>
      <el-button
          type="primary"
          @click="submitForm('userForm')"
          :loading="loading"
      >保存配置
      </el-button>
    </div>
  </div>
</template>

<script>
import {saveControlApi} from '@/api/user'// 普通模式,操作接口
// import {saveControlApi} from '@/api/nodeApi'// electron模式,操作本地文件
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    }
  },

  data() {
    return {
      loading: false,
      configForm: {
        name: '',
        configInfo:[]
      },
      configFormRules: {
        name: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'},
        ],
      },
    };
  },

  mounted() {
    // 初始化数据结构与 list 长度相匹配
    this.initData();
  },

  methods: {

    initData() {
      if (this.type === 'add'){
        this.list.forEach((item) => {
          this.configForm.configInfo.push({...item, name: item.name, startAngle: 0, endAngle: 0, second: 0});
        });
      } else {
        this.configForm.name = this.data.name;
        this.configForm.id = this.data.id;
        this.list.forEach((item,index) => {
          const { name,startAngle, endAngle, second } = this.data.configInfo[index];
          this.configForm.configInfo.push({...item, name, startAngle, endAngle, second});
        });
      }


    },

    clearInputs(index) {
      const currentItem = this.configForm.configInfo[index];
      this.$set(this.configForm.configInfo, index, {...currentItem, startAngle: 0, endAngle: 0, second: 0});
    },

    startRotateChange(e, item) {
      const {jointName,linkName} = item;
      this.$emit('sliderInput',e.target.value,jointName,linkName)
    },

    handleStart(index) {
      let row = this.configForm.configInfo[index];
      this.$emit('startRotate', [row])
    },
    handleStartAll() {
      this.$emit('startRotate', this.configForm.configInfo)
    },
    closeForm() {
      // 实现关闭表单逻辑...
      this.$emit('closeForm')
    },

    submitForm() {
      this.$refs['configForm'].validate((valid) => {
          if(valid){
            saveControlApi(this.configForm).then(res => {
              console.log(res);
              if (res.code === 0) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                });
                this.$emit('closeForm')
              }
            });
          }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  height: calc(100vh - 100px);
  overflow-y: auto;
  position: relative;
  padding: 10px 10px 60px 10px;
  .detail-name{
    font-size: 20px;
    //font-weight: bold;
    margin-bottom: 10px;
  }
  h3{
    margin-top: 0;
  }
  label{
    font-size: 14px;
  }
  .config-item{
    border: 1px solid #E4E7ED;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .detpBtn {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 30vw;
    height: 60px;
    align-items: center;
  }
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.input-item {
  //margin-right: 10px;
}

.bottom-btn {
  text-align: right;
}
</style>
